import React, { Component } from 'react'

import './index.css'

export default class Item extends Component {
    state = {
        isEnter: false
    }
    render() {
        //拿到List组件传递的当前信息
        const { isEnter } = this.state;
        const { content, done } = this.props;
        return (
            // <li onMouseEnter={this.enter} onMouseLeave={this.leave} style={{ background: isEnter ? '#999' : '#fff' }}>
            // <li onMouseEnter={this.enter} onMouseLeave={this.leave} className={isEnter ? "active" : ""}> //样式active写在css文件里面
            //高阶函数写法
            <li onMouseEnter={this.mouseHanlder(true)} onMouseLeave={this.mouseHanlder(false)} className={isEnter ? "active" : ""}>

                <label>
                    <input type="checkbox" checked={done} onChange={this.changeChecked} />
                    <span>{content}</span>
                </label>
                <button onClick={this.deleteCurrent} className='btn btn-danger' style={{ display: isEnter ? 'block' : 'none' }}>删除</button>
            </li>
        )
    }

    changeChecked = (e) => {
        const { done, changeDone, id } = this.props;
        console.log(done, changeDone);

        //调用App的changeDone方法，把自己当前的状态传递过去
        //调用的时候 还要传递当前点击的item的id，方便App组件进行判断当前点的是哪一个
        changeDone(id, done);
    }

    //鼠标移入事件
    /* enter = () => {
        this.setState({ isEnter: true })
    }
    //鼠标移出事件
    leave = () => {
        this.setState({ isEnter: false })
    } */

    //鼠标移入移出的事件函数
    mouseHanlder = (flag) => {
        return () => {
            this.setState({ isEnter: flag })
        }
    }


    //删除功能
    deleteCurrent = () => {
          //获取list传递进来的当前item组件的id  和App传递进来的函数
          const{deleteTodo,id}=this.props;

          //调用App中传递进来的函数,并传入当前点击删除的id
          deleteTodo(id);
    }

}
